<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="never">
          <div slot="header">
            <span>总客户数（个）</span>
          </div>
          <div>
            <vab-count
              class="count"
              :start-val="config1.startVal"
              :end-val="config1.endVal"
              :duration="config1.duration"
              :separator="config1.separator"
              :prefix="config1.prefix"
              :suffix="config1.suffix"
              :decimals="config1.decimals"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="never">
          <div slot="header">
            <span>总订单数（件）</span>
          </div>
          <div>
            <vab-count
              class="count"
              :start-val="config2.startVal"
              :end-val="config2.endVal"
              :duration="config2.duration"
              :separator="config2.separator"
              :prefix="config2.prefix"
              :suffix="config2.suffix"
              :decimals="config2.decimals"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="never">
          <div slot="header">
            <span>订单金额（元）</span>
          </div>
          <div>
            <vab-count
              class="count"
              :start-val="config3.startVal"
              :end-val="config3.endVal"
              :duration="config3.duration"
              :separator="config3.separator"
              :prefix="config3.prefix"
              :suffix="config3.suffix"
              :decimals="config3.decimals"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="never">
          <div slot="header">
            <span>价格策略数量（个）</span>
          </div>
          <div>
            <vab-count
              class="count"
              :start-val="config4.startVal"
              :end-val="config4.endVal"
              :duration="config4.duration"
              :separator="config4.separator"
              :prefix="config4.prefix"
              :suffix="config4.suffix"
              :decimals="config4.decimals"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="card alert-area" shadow="never">
          <div slot="header">
            <span>销售订单</span>
          </div>
          <el-tabs type="border-card" tab-position="bottom">
            <el-tab-pane label="本周">
              <vab-chart
                :autoresize="true"
                theme="vab-echarts-theme"
                :options="sqs"
              />
            </el-tab-pane>
            <el-tab-pane label="本月">
              <vab-chart
                :autoresize="true"
                theme="vab-echarts-theme"
                :options="monthSqs"
              />
            </el-tab-pane>
            <el-tab-pane label="全年">
              <vab-chart
                :autoresize="true"
                theme="vab-echarts-theme"
                :options="yearSqs"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VabChart from '@/plugins/echarts'
import { getDashboradData,getWeekData,getMonthData,getYearData } from '@/api/dashboard'
export default {
  name: 'Index',
  components: {
    VabChart,
  },
  data() {
    return {
      timer: 0,
      updateTime: process.env.VUE_APP_UPDATE_TIME,
      nodeEnv: process.env.NODE_ENV,
      config1: {
        startVal: 0,
        endVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 2000,
      },
      config2: {
        startVal: 0,
        endVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 2000,
      },
      config3: {
        startVal: 0,
        endVal: 0,
        decimals: 2,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 2000,
      },

      config4: {
        startVal: 0,
        endVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 2000,
      },


      //授权数
      sqs: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: '4%',
          left: '2%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            /*boundaryGap: false,*/
            data: [
              '星期日',
              '星期一',
              '星期二',
              '星期三',
              '星期四',
              '星期五',
              '星期六',
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '订单数',
            type: 'bar',
            barWidth: '60%',
            data: [],
          },
        ],
      },
      //授权数
      monthSqs: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: '4%',
          left: '2%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            /*boundaryGap: false,*/
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '订单数',
            type: 'bar',
            barWidth: '60%',
            data: [],
          },
        ],
      },
      //授权数
      yearSqs: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: '4%',
          left: '2%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            /*boundaryGap: false,*/
            data: [
              '一月',
              '二月',
              '三月',
              '四月',
              '五月',
              '六月',
              '七月',
              '八月',
              '九月',
              '十月',
              '十一月',
              '十二月',
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '订单数',
            type: 'bar',
            barWidth: '60%',
            data: [],
          },
        ],
      },

      //更新日志
      reverse: true,
      activities: [],
      noticeList: [],
      //其他信息
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleClick(e) {
      this.$baseMessage(`点击了${e.name},这里可以写跳转`)
    },
    handleZrClick(e) {},
    handleChangeTheme() {
      this.$baseEventBus.$emit('theme')
    },
    async fetchData() {
      const data = await getDashboradData()
      this.config1.endVal = data.customerCount
      this.config2.endVal = data.orderCount
      this.config3.endVal = data.orderAmount
      this.config4.endVal = data.priceStrategyCount

      //本周的报警数
      let res = await getWeekData()
      this.sqs.series[0].data = res.alertWeekHistory

      //本月
      res = await getMonthData()
      this.monthSqs.xAxis[0].data = res.alertMonthDay
      this.monthSqs.series[0].data = res.alertMonthHistory

      //本年
      res = await getYearData()
      this.yearSqs.series[0].data = res.alertHistory

    }
  }
}
</script>
<style lang="scss" scoped>
.index-container {
  padding: 0 !important;
  margin: 0 !important;
  background: #f5f7f8 !important;

  ::v-deep {
    .el-alert {
      padding: $base-padding;

      &--info.is-light {
        min-height: 82px;
        padding: $base-padding;
        margin-bottom: 15px;
        color: #909399;
        background-color: $base-color-white;
        border: 1px solid #ebeef5;
      }
    }

    .el-card__body {
      .count {
        font-size: 40px;
      }
    }
  }

  .card {
    min-height: 400px;

    ::v-deep {
      .el-card__body {
        .echarts {
          width: 100%;
          height: 280px;
        }
      }
    }
  }

  //房间告警排名
  .room-alert-top {
    .el-card__body {
      .el-row {
        padding-top: 10px;
        padding-bottom: 10px;
        .seq {
          display: block;
          width: 18px;
          height: 18px;
          font-size: 10px;
          border-radius: 50%;
          line-height: 18px;
          background-color: #000;
          color: #fff;
          text-align: center;
        }
      }
    }
  }

  .room-card {
    .el-card__body {
      .el-row {
        display: flex;
        padding-top: 10px;
        padding-bottom: 10px;
        .title {
          text-align: center;
        }
        .left {
          text-align: center;
          div {
            padding: 5px;
          }
          div:last-child {
            font-size: 20px;
          }
        }
      }
    }
  }

  .bottom {
    padding-top: 20px;
    margin-top: 5px;
    color: #595959;
    text-align: left;
    border-top: 1px solid $base-border-color;
  }

  .icon-panel {
    height: 100px;
    text-align: center;
    cursor: pointer;

    svg {
      font-size: 40px;
    }

    p {
      margin-top: 10px;
    }
  }

  .bottom-btn {
    button {
      margin: 5px 10px 15px 0;
    }
  }
}
</style>
